<template>
<div class="hroedeil">
  <div class="main-header">
    <img class="img" src="../assets/logo.png" height="30">
    <div class="desc">
      <div class="text-on">王者荣耀</div>
      <div class="text-dwon">攻略站</div>
    </div>
    <router-link class="btn "
      to="/" tag="div"
    >
      <span>更多英雄</span>
      <i class="iconfont iconback"></i>
    </router-link>
  </div>
  <div class="banner" :style="{'background-image': `url(${model.banner})`}">
    <router-link class="gobackhome"
    tag="div"
     to="/"
    >
    <i class="iconfont iconhuitui1"></i>
    </router-link>
    <div class="banner-info">
      <div class="title">{{model.title}}</div>
      <h2 class="name">{{model.name}}</h2>
      <div class="fs-sm">{{model.categories.map(v => v.name).join('/')}}</div>
      <div class="d-flex  ">
        <div class="scores  " v-if="model.scores">
          <span>难度</span>
          <span class="difficult">{{model.scores.difficult}}</span>
          <span>技能</span>
          <span class="skills">{{model.scores.skills}}</span>
          <span>攻击</span>
          <span class="attack ">{{model.scores.attack}}</span>
          <span>生存</span>
          <span class="survive ">{{model.scores.survive}}</span>
        </div>
          <div class="pifu" @click="handleBannerClick">皮肤 {{skinimg.length}}<i class="iconfont iconback"></i></div>
      </div>
    </div>
  </div>
  <fade-animation>
    <gallary
      :imgs="skinimg"
      v-show="showGallary"
      @close="handleGallaryClose"
    ></gallary>
  </fade-animation>
    <div class="hero-nav">
      <div class="item " :class="{avtive:avtive===0}"
           @click="$refs.list.swiper.slideTo(0)">
        <div class="nav-link ">英雄初识</div>
      </div>
      <div class="item"  :class="{avtive:avtive===1}"
           @click="$refs.list.swiper.slideTo(1)">
        <div class="nav-link">进阶攻略</div>
      </div>
    </div>
    <div class="content">
      <swiper ref="list" :options="{autoHeight: true}"
              @slide-change="() => avtive = $refs.list.swiper.realIndex">
        <swiper-slide >
        <div class="nav-vide">
        <div class="item">
          <i class="iconfont iconshipin"></i>
          <span> 英雄介绍视频</span>
        </div>
          <div class="item">
            <i class="iconfont iconpicture"></i>
            <span>一图识英雄</span>
          </div>

        </div>
          <div class="skillslist">
          <div class="skill-icon">
            <div class="icon-item">
              <img
                class="icon"
                @click="currentSkillIndex = i"
                :class="{active: currentSkillIndex === i}"
                :src="item.icon"
                v-for="(item, i) in model.skills"
                :key="item.name"
              />
            </div>
          </div>
            <div v-if="currentSkill">
              <div class="content ">
                <h3 class="name">{{currentSkill.name}}</h3>
                <span >
                      (冷却值: {{currentSkill.delay}}
                      消耗: {{currentSkill.cost}})
                    </span>
                <p>{{currentSkill.description}}</p>
                <p class="tips">小提示: {{currentSkill.tips}}</p>
              </div>
            </div>
          </div>
          <m-card plain icon="iconchuanchengxing" title="出装推荐" class="hero-items">
            <div  class="titel">顺风出装</div>
            <div class=" equiplist ">
              <div v-for="item in model.items1" :key="item.name" class="equip-items">
                <img :src="item.icon" class="icon">
                <div class="fs-xs">{{item.name}}</div>
              </div>
            </div>
            <div class="border-bottom "></div>
            <div class="titel">逆风出装</div>
            <div class="equiplist ">
              <div v-for="item in model.items2" :key="item.name" class="equip-items">
                <img :src="item.icon" class="icon">
                <div class="fs-xs">{{item.name}}</div>
              </div>
            </div>
          </m-card>
          <m-card plain icon="iconchuanchengxing" title="使用技巧">
            <p class="m-0">{{model.usageTips}}</p>
          </m-card>
          <m-card plain icon="iconchuanchengxing" title="对抗技巧">
            <p class="m-0">{{model.battleTips}}</p>
          </m-card>
          <m-card plain icon="iconchuanchengxing" title="团战思路">
            <p class="m-0">{{model.teamTips}}</p>
          </m-card>
          <m-card plain icon="iconchuanchengxing" title="英雄关系" class="partners-items">
            <div class="title">最佳搭档</div>
            <div v-for="item in model.partners" :key="item.name"
                 class="itme " >
              <img :src="item.hero.avatar" alt="" height="50" >
              <p class=" descripteion" >
                {{item.description}}
              </p>
            </div>
            <div class="border-bottom mt-3"></div>
          </m-card>
        </swiper-slide>
        <swiper-slide >
          3
        </swiper-slide>
      </swiper>
    </div>
</div>
</template>

<script>
import Gallary from '../components/common/gallary/Gallary'
import FadeAnimation from '../components/common/fade/FadeAnimation'
export default {
  components: {
    Gallary,
    FadeAnimation
  },
  props: {
    id: { required: true }
  },
  data () {
    return {
      avtive: 0,
      model: {},
      showGallary: false,
      currentSkillIndex: 0,
      skinimg: ['http://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/107/107-mobileskin-1.jpg', 'http://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/107/107-mobileskin-2.jpg', 'http://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/107/107-mobileskin-3.jpg', 'http://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/107/107-mobileskin-4.jpg', 'http://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/107/107-mobileskin-5.jpg']
    }
  },
  computed: {
    currentSkill () {
      return this.model.skills[this.currentSkillIndex]
    }
  },
  methods: {
    handleBannerClick () {
      this.showGallary = true
    },
    handleGallaryClose () {
      this.showGallary = false
    },
    async fetch () {
      const res = await this.$http.get(`heroes/${this.id}`)
      this.model = Object.assign({}, this.model, res.data)
    }
  },
  created () {
    this.fetch()
  }
}
</script>

<style lang="scss" scoped>
  @import "../assets/styles/global";
  .hroedeil{
    background-color:white;
    .main-header {
      @include flex;
      left: 0;
      top: 0;
      height: .9rem;
      width: 100%;
      z-index: 20;
      position: fixed;
      background-color: black;

      .img {
        margin: .2rem;
      }

      .desc {
        flex: 1;

        .text-on {
          font-size: .26rem;
          line-height: .34rem;
          color: #fff;
        }

        .text-dwon {
          font-size: .16rem;
          color: #666;
        }
      }

      .btn {
        display: flex;
        margin-right: .2rem;
        color: white;
      }

    }
    .banner{
      width: 100%;
      height: 3.82rem;
      position: relative;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: .88rem;
      .gobackhome{
        position: absolute;
        top: .3rem;
        left: .3rem;
        color: white;
        font-size: .42rem;
        font-weight: bold;
      }
      .banner-info{
        position: absolute;
        bottom: 0;
        left: .3rem;
        height: 1.78rem;
        width: 6.92rem;
        z-index: 1;
        display: flex;
        flex-direction: column;
        .title{
          padding-bottom: .11rem;
          color: #fff;
        }
      .name{
        height: .34rem;
        line-height: .34rem;
        font-size: .34rem;
        font-weight: bold;
        padding-bottom: .11rem;
        color: #fff;
      }
        .fs-sm{
          padding-bottom: .11rem;
          color: #fff;
        }
        .d-flex{
          display: flex;
          justify-content: space-between;
          .pifu{
            color: white;
          }
          span{
            color: #ffffff;
            font-size: .24rem;
            line-height: .24rem;
            height: .24rem;
            margin-right: .2rem;
          }
          span:nth-of-type(2n){
            font-size: .24rem;
            line-height: .24rem;
            height: .24rem;
            margin-right: .2rem;
            color: orangered;
          }
        }

      }
    }
    .hero-nav{
      cursor: pointer;
      width: 7.02rem;
      margin: 0 auto;
      padding: .24rem 0 .15rem 0;
      border-bottom: 1px solid #d4d9de;
      display: flex;
      justify-content: space-around;
      .item{
        cursor: pointer;
        &.avtive{
          color: #d59b40;
          border-bottom: .04rem solid #d59b40;
        }
      }
    }
    .content{
      .nav-vide{
        padding: .18rem 0 .26rem 0;
        width: 7.02rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item{
          height: .74rem;
          line-height: .74rem;
          color: #343440;
          font-size: .26rem;
          background-color: #fcfcfc;
          width: 3.4rem;
          border-radius: .1rem;
          border: 1px solid #eceef0;
          text-align: center;
          text-indent: .6rem;
          i{
            margin-right: .2rem;
            color: #d59b40;
            font-size: .38rem;
          }
        }
      }
      .skillslist{
        width: 7.02rem;
        margin: .3rem auto 0 auto;
        overflow: hidden;
        .skill-icon{
          display: flex;
          justify-content: space-around;
          .icon-item{
            .icon{
              margin: 0 .1rem;
              width: 70px;
              height: 70px;
              border: 3px solid white;
              &.active {
                border-color:#d59b40
              }
              border-radius: 50%;
            }
          }
        }
        .content{
          padding-top: .4rem;
          .name{
            color: #343440;
            font-size: .3rem;
            font-weight: bold;
            width: 1.5rem;
            margin-bottom: .2rem;
          }
          .tips{
            padding: .26rem 0 .42rem 0;
            color: #7a7a80;
            font-size: .26rem;
            line-height: .4rem;
          }

        }
      }
      .hero-items{
        margin-top: -.2rem;
        .titel{
          color: #343440;
          font-size: .3rem;
          padding-bottom: .25rem;
          line-height: .28rem;
          height: .28rem;
        }
        .equiplist{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .equip-items{
            text-align: center;
            img{
              width: .93rem;
              height: .93rem;
              border-radius: .46rem;
              margin-bottom: .03rem;
            }
          }
        }
        .border-bottom{
          width: 100%;
          height: .1rem;
          color: #cccccc;
          margin: .2rem 0;
        }
      }
      .partners-items{
        .title {
          color: #343440;
          font-size: .3rem;
          padding-bottom: .25rem;
          line-height: .28rem;
          height: .28rem;
        }
          .itme{
            margin-top: .2rem;
            display: flex;
            .descripteion{
                flex: 1;
                color: #343440;
                font-size: .26rem;
                line-height: .4rem;
                width: 5.86rem;
                padding-top: .05rem;
              margin-left: .2rem;
            }
          }

      }

    }
  }

</style>
